<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
    @select="handleSelect"
  >
    <el-menu-item index="0">
      <img
        style="width: 40px"
        src="../assets/images/logo.png"
        alt="BlockDAO"
      />
    </el-menu-item>
    <template v-for="item in menuItems" :key="item.index">
      <el-menu-item v-if="!item.children" :index="item.index">
        {{ $t(item.title) }}
      </el-menu-item>
      <el-sub-menu v-else :index="item.index">
        <template #title>{{ $t(item.title) }}</template>
        <template v-for="child in item.children" :key="child.index">
          <el-menu-item v-if="!child.children" :index="child.index">
            {{ $t(child.title) }}
          </el-menu-item>
          <el-sub-menu v-else :index="child.index">
            <template #title>{{ $t(child.title) }}</template>
            <el-menu-item v-for="subChild in child.children" :key="subChild.index" :index="subChild.index">
              {{ $t(subChild.title) }}
            </el-menu-item>
          </el-sub-menu>
        </template>
      </el-sub-menu>
    </template>
    <el-sub-menu index="user">
      <template #title>{{ key_info?key_info:$t('User') }}</template>
        <el-menu-item index="/profile">{{ $t('Profile') }}  </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount} from 'vue';
import { languageSet, localsChangedNotify } from '@/utils/watchLang';
import { useI18n } from 'vue-i18n';
import eventBus from '@/utils/eventbus';
import { useRouter } from 'vue-router';
import { headerMenu } from '@/router/headerMenu';
import { User } from '@/model/User';

const language = ref(languageSet());
const { locale } = useI18n();
const router = useRouter();
const user = ref(JSON.parse(localStorage.getItem('user')));
const key_info = ref(localStorage.getItem('key_info'));
const key_address = ref(localStorage.getItem('key_address'));

/* 语言切换方法 */
const changeLang = (val: string) => {
  console.log(locale.value);
  locale.value = val === 'zh' ? 'zh' : val;
  localStorage.setItem('lang', val);
  localsChangedNotify(val);
};

window.addEventListener('onLocalsChanged', (e: any) => {
  language.value = e.detail;
  console.log(language.value);
});

const activeIndex = ref('1');
const menuItems = ref(headerMenu);

const handleSelect = (key: string, keyPath: string[]) => {
  if (key.indexOf('/') >= 0) {
    console.log(key, keyPath);
    router.push(key);
  }
  if (key.indexOf('lang') >= 0) {
    changeLang(key.replace('lang-', ''));
  }
};

// 监听  变化
const userChange = (u: User) => {
    user.value = u;
};

const keyChange = (data: { [key:string] : string }) => {
    key_info.value = data.key_name;
    key_address.value = data.address;
};

onMounted(() => {
  eventBus.on('userChange', userChange);
  eventBus.on('keyChange', keyChange);
});

onBeforeUnmount(() => {
  eventBus.off('userChange', userChange);
  eventBus.off('keyChange', keyChange);
});

</script>

<style>
.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
}
</style>